/* 图表页面思路分析: 从左往右,从上往下依次加载图表数据
1.班级概览
2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资
    饼图 ： 省份信息
    地图 ： 县信息

3.学生成绩列表
    柱状图 :  x轴：小组   y轴：分数成绩

4.点击柱状图右上角三个小点,可以实现 切换成绩效果
*/


// 1.班级概览
axios({
    url:'/student/overview',
    method:'get',
}).then(res=>{
    //成功回调
    console.log(res)
    document.querySelector('.overview .total').innerHTML = res.data.data.total
    document.querySelector('.overview .avgSalary').innerHTML = res.data.data.avgSalary
    document.querySelector('.overview .avgAge').innerHTML = res.data.data.avgAge
    document.querySelector('.overview .proportion').innerHTML = res.data.data.proportion
})





/* 2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资 */
axios({
    url:'/student/list',
    method:'get',
}).then(res=>{
    //成功回调
    console.log(res)
    let data = res.data.data
    //折线图数据
    let lineData = {
        names: [],
        salarys: [],
        truesalarys: [],
    }
    
    data.forEach(item => {
        lineData.names.push(item.name)
        lineData.salarys.push(item.salary)
        lineData.truesalarys.push(item.truesalary)
    })

    setLine(lineData)
})







function setLine(obj){
    // 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.querySelector('.panel.line'));

// 指定图表的配置项和数据
let option = {
    title: {
      text: '薪资 Salary'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
    //   data: ['期望薪资', '实际薪资']
      data: ['期望薪资', '实际薪资']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
    //   data: ['张三', '李四', '王五', '赵六', '朱八']
      data: obj.names
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 10
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        stack: 'Total',
        // data: [120, 132, 101, 134, 90, 230, 210],
        data: obj.salarys,
        smooth: true
      },
      {
        name: '实际薪资',
        type: 'line',
        stack: 'Total',
        // data: [220, 182, 191, 234, 290, 330, 310],
        data: obj.truesalarys,
        smooth: true
      },
      
    ]
  };
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}



